<script setup lang="ts">
import type {CancelBookReqVO, PageRecordRespVO} from "@/interfaces/book";
import {computed, ref} from "vue";
import {useCancelBookApi} from "@/services/api";
import moment from "moment";

interface Props {
  bookInfo: PageRecordRespVO
}
interface Emits{
  (e:'refresh'):void;
}
const show = ref<boolean>(false)
const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const timeQuantum = computed(() => props.bookInfo.detailList.map(value => value.timeQuantum))
const statusList = ref<string[]>(['取消预约', '已预约', '已完成'])
const statusTypeList = ref<string[]>(['error', 'primary', 'success'])
const cancelBookReq = ref<CancelBookReqVO>({
  id:props.bookInfo.id,
  status:0
})
const menusList = ref([
  {
    name: '取消预约',
    handle: async (data:CancelBookReqVO)=>{
      await useCancelBookApi(data)
      emits('refresh')
    }
  }
])
const onCancel = () => {
  show.value = false
}
const selectClick = (index:any) => {
  index.handle(cancelBookReq.value)
  show.value = false
}
const onHandle = () => {
  const isExpire = props.bookInfo.detailList.map((value):boolean => moment(value.bookDate+' '+value.timeQuantum.split('-')[0]+':00').isBefore(moment()))
  if (!isExpire.includes(false)) return
  if(props.bookInfo.status == 1) show.value = true
}
</script>

<template>
  <view class="container" @tap="onHandle">
    <view>预约日期：{{ props.bookInfo.detailList[0].bookDate }}</view>
    <view>预约时间段：</view>
    <view class="time">
      <u-tag
          v-for="(time,index) in timeQuantum"
          :text="time"
          :key="index"
          type="warning"
      ></u-tag>
    </view>
    <view>预约区域：{{ props.bookInfo.detailList[0].label }}</view>
    <view>预约座位：{{ `${props.bookInfo.detailList[0].deskNum}号${props.bookInfo.detailList[0].seatNum}座` }}</view>
    <view>预约时间：{{ props.bookInfo.createTime }}</view>
    <view class="status">状态：
      <u-tag
          :text="statusList[props.bookInfo.status]"
          :type="statusTypeList[props.bookInfo.status]"
      ></u-tag>
    </view>
  </view>
  <u-action-sheet
      :actions="menusList"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      cancelText="关闭"
      @select="selectClick"
      @close="onCancel"
      title="操作"
      :show="show"></u-action-sheet>
</template>

<style scoped lang="scss">
%Common {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 12rpx;

  .time {
    @extend %Common;
    gap: 10rpx;
  }

  .status {
    @extend %Common;
    gap: 10rpx;
  }
}
</style>